<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->
		<!-- 	<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
			:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
			bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
		
			<view class="" style="padding: 20rpx 20rpx 0;">
				<view class="search-content">
					<image class="address-img" :src="dw" mode=""></image>
					<text>{{userInfo.city_name}}</text>
					<text style="margin-left: 20rpx;color:rgb(224 218 218);">|</text>
					<image class="search-img" :src="search" mode=""></image>
					<input placeholder="请搜索社群名称" v-model="searchVal" @input="changeInput"
						style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
					<!-- <image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image> -->
				</view>
				<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
					@click="clickSlideImg"></liu-slide-img>
				<view class="swiperList flex">

					<swiper class="swiper" :autoplay='autoplayBoolen' vertical=true circular
						:indicator-dots="indicatorDots" :duration="duration">
						<block v-for="(item,i) in shareList" :key="i">
							<swiper-item>
								<view class="swiper-item uni-bg-red flex-between" @click="rollFn(item)">
									<image class="noticeImg" :src="notice" mode=""></image>
									<text class="font-overflow"
										style="color:#333333;font-size: 30rpx;max-width: 380rpx;">{{item.title }}
									</text>
									<text class=""
										style="color:#999999;margin-right: 50rpx;">{{item.create_time}}</text>
								</view>

							</swiper-item>
						</block>

					</swiper>

				</view>

				<!--   <mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
             	@up="upCallback" :up="upOption" :down="downOption"> -->
				<!-- 群列表 -->
				<scroll-list ref="list" @load="load" @refresh="refresh">
				<block v-for="(item,index) in list" :key="index">
					<view class="groupList ">
						<view class="flex-between ">
							<view class="flex-start-center">
								<image class="groupImg" :src="item.head_img" mode=""></image>
								<view class="flex-column-between-start" style="margin-left: 10rpx;height: 156rpx">

									<view class="flex-start-center">
										<view class="topMounted flex" v-if="item.sort==1">
											<text>顶置</text>
										</view>
										<view class="font-weight">
											{{item.name}}
										</view>
									</view>
									<view class="font-overflow2 " style="width: 350rpx;color: #999999;">
										<text>{{item.desc}}</text>
									</view>
									<view class="">
										<image class="humanHead" :src="path88" mode=""></image>
										<text style="color: #0191FF;">{{item.allow_join_number}}人 | {{item.create_time}}</text>
											
									</view>
								</view>
							</view>
							<view class="">
								<view class="addGroup flex" @click="isAllowedFn(item)">
									<text>{{item.is_join==1?'已解锁':'加群'}}</text>
								</view>
								<view class="margin-top_16rpx" v-if="item.is_join!=1">
									<text
										:style="userInfo.level_id!=1 ? 'color: #c5c5c5;margin-right: 10rpx;text-decoration: line-through;' : 'color: red;margin-right: 10rpx;'">{{item.price}}</text><text>{{currency_name}}</text>
								</view>
								<!-- <view class="margin-top_16rpx" v-if="item.is_join!=1">
							<text style="color: red;margin-right: 10rpx;">{{(basicConfiguration.community_level_discount)}}</text><text>{{currency_name}}</text>
						</view> -->
								<view class="margin-top_16rpx" v-if="item.is_join!=1&&userInfo.level_id!=1">
									<text
										style="color: red;margin-right: 10rpx;">{{(item.price*((Number(basicConfiguration.community_level_discount))/100)).toFixed(2)}}</text><text>{{currency_name}}</text>
								</view>

								<view v-if="item.is_join==1" class="margin-top_16rpx" @click="ViewMembers(item.id)">
									<text>查看群成员</text>
								</view>
								<!-- communityUser -->
							</view>
						</view>


					</view>
				</block>
              		</scroll-list>
				<!-- </mescroll-body> -->
				<!-- 	<view style="height: 125rpx;" class="">
				
			</view> -->
				<sunui-popup ref="myPackagePopup">
					<template v-slot:content>

						<view class=" gzhCard" @click="rechargeFn">
							<view style="text-align: center;margin-top: 336rpx;">
								当前{{currency_name}}不足，请立即充值开启别错过商机群以及
								交友信息等


							</view>

							<view style="color: rgb(153, 153, 153);;" class="text-align_center margin-top_40rpx"
								@click.stop="cancelFn()">
								<text>算了我放弃了</text>
							</view>


						</view>

					</template>
				</sunui-popup>
				<!-- <sunui-popup ref="myRollPopup">
				<template v-slot:content>

					<view class="flex-column ">
						<scroll-view :scroll-y="true" style="height: 1000rpx;">


							<view v-html="desc" class="">

							</view>
						</scroll-view>
					</view>

				</template>
			</sunui-popup> -->


			</view>

	</view>
</template>

<script>
	export default {
		props: ['show'],
		components: {

		},
		data() {
			return {
				currency_name: uni.getStorageSync("system").currency_name,
				search: this.$img.search,
				daziBg1: this.$img.daziBg1,
				notice: this.$img.notice,
				path88: this.$img.path88,
				dw: this.$img.dw,
				desc: null,
				list: [],
				userInfo: uni.getStorageSync("userInfo"),
				currentIndex: 0,
				heightSystemss: 0,
				duration: 1500,
				listPoster: [],
				autoplay: true,
				interval: 3000,
				searchVal: '',
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				shareList: [],
				autoplayBoolen: true,
				indicatorDots: false,
				isAndroid: true,
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],
				form: {
					phone: '',
					sms_code: ''
				},
				count: 0,
				disableCode: false,
				basicConfiguration: {},

				// 列表总数量
				totalNum: 600,
				//  页码 默认1开始
				curPageNum: 1,
			}
		},
		onLoad() {
			wx.getSystemInfo({
				success: (res) => {
					let platform = res.system;

					if (platform.indexOf('Android') !== -1) {
						this.isAndroid = true

						console.log('用户使用安卓设备');

					} else if (platform.indexOf('iOS') !== -1) {
						this.isAndroid = false
						// uni.showModal({
						// 	title: '提示',
						// 	content: '是否跳转到联系我们页面',
						// 	success: async (res) => {
						// 		if (res.confirm) {
						//              this.$sun.navGo('/pagesA/personalCenter/contactUs')

						// 		} else if (res.cancel) {

						// 		}
						// 	}
						// });
						console.log('用户使用苹果设备');
					}
				}
			});
			// this.createdgetSystemInfo()
			this.init()

			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 900;
				}
			});
			this.rollMessageFn()
		},
		onShow() {
			this.$refs.list.refresh();
		},
		created() {
			this.userInfoFns()
			this.basicConfigurationFn()
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			// this.createdgetSystemInfo()
			this.init()
			this.rollMessageFn()
		},
		watch: {
			show: function(value) {


				this.$nextTick(() => {
					this.$refs.list.refresh();
				})
			}
		},
		methods: {
			async userInfoFns() {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);

					wx.setStorageSync('userInfo', result.data);
					// 判断当前是否为会员  获取基础数据折扣价格


				}
			},
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {},
					headers: {

					}

				})
				if (result.code == 0) {
					console.log(result)
					this.basicConfiguration = result.data

					wx.setStorageSync('system', result.data);


				}
			},
			closeBtn() {
				this.userInfoFns()
				this.$refs.phoneLogin.close()
			},
			// 验证码码倒计60秒
			countDown(seconds) {
				this.count = seconds;
				var countdownTimer = setInterval(() => {
					this.count--;
					if (this.count === 0) {
						clearInterval(countdownTimer);
						this.disableCode = false;
						// 在这里可以触发验证码过期后的操作
					}
				}, 1000);
			},
			async getVerificationCode() {
				if (!this.disableCode) {

					if (/^1[3456789]\d{9}$/.test(this.form.phone)) {
						const result = await this.$http.post({
							url: this.$api.sendSmsRequest,
							data: {

								phone: this.form.phone
							}
						});

						if (result.code == 0) {

							this.disableCode = true;
							this.countDown(60);
						} else {
							this.$sun.toast(result.message, 'none');
						}

					} else {
						this.$sun.toast('请填写正确的手机号', 'none');
					}
				}
			},
			ViewMembers(id) {

				this.$sun.navGo('/pagesA/personalCenter/groupMembers', {
					id: id
				})
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.$refs.list.refresh();
			},
			rollFn(item) {
				this.desc = item.desc
				this.$refs.myRollPopup.show({
					style: 'background-color:#fff;width:400rpx;border-radius:10rpx;padding:20rpx',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				}

			},
			async rollMessageFn() {
				const resPoster = await this.$http.post({
					url: this.$api.rollMessage,
					data: {



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.shareList = resPoster.data.list.map((item) => {
						return {
							title: item.title,
							desc: item.desc,
							create_time: item.create_time.split(' ')[1]
						}
					});
					console.log(this.shareList)




				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 5

					},
					headers: {
						// 'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 5);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}



			},
			// 订阅消息
			async templateTpo() {
				wx.requestSubscribeMessage({
					tmplIds: JSON.parse(JSON.stringify(uni.getStorageSync("messageListTemplate"))),
					success: res => { //成功、
						if (res[Object.keys(res)[0]] == "accept") {
							console.log("成功订阅")
							// this.$sun.toast("成功订阅")
						} else {
							this.$sun.toast(
								"点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅")

							uni.showModal({
								title: "温馨提示",
								content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
							})
						}
					},
					fail: err => { //失败
						console.log(err)
						this.$sun.toast("订阅消息配置失败");
					}
				})



				// wx.getSetting({
				// 	success(res) {
				// 		console.log(res)
				// 		if (res.subscriptionsSetting) {
				// 			// 用户有pushSubscription对象
				// 			const pushSubscription = res.subscriptionsSetting['message.subscribe.send']
				// 			if (pushSubscription) {
				// 				// 用户已订阅
				// 				console.log('用户已订阅')
				// 				this.$sun.toast("用户已订阅")
				// 			} else {
				// 				wx.requestSubscribeMessage({
				// 					tmplIds: ['Y04lXw-tkuSAdFi77o5BPCJij1Z9fq7e4ZbIYidgm20'],
				// 					success: res => { //成功、
				// 						if (res[Object.keys(res)[0]] == "accept") {
				// 							console.log("成功订阅")
				// 							this.$sun.toast("成功订阅")
				// 						} else {
				// 							this.$sun.toast(
				// 								"点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅")

				// 							uni.showModal({
				// 								title: "温馨提示",
				// 								content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
				// 							})
				// 						}
				// 					},
				// 					fail: err => { //失败
				// 						console.log("订阅消息配置失败")
				// 						this.$sun.toast("订阅消息配置失败");
				// 					}
				// 				})

				// 			}
				// 		} else {
				// 			this.$sun.toast("无法获取订阅状态")
				// 			// 用户没有pushSubscription对象，可能是微信版本过低或者用户未允许小程序获取该权限
				// 			console.log('无法获取订阅状态')
				// 		}
				// 	},
				// 	fail() {
				// 		// 获取设置失败的处理逻辑
				// 	}
				// })





			},
			async isAllowedFn(item) {



				if (uni.getStorageSync("userInfo").disable == 0) {
					this.$sun.toast('该用户已被拉黑', 'none')
				} else {
					if (uni.getStorageSync("userInfo").phone) {

						console.log(item.uid, this.userInfo.id)
						if (item.uid == this.userInfo.id) {
							this.$sun.toast('自己的社群自己不可以加入', 'none')
						} else {

							if (item.is_join == 1) {
								this.$sun.navGo('/pagesB/index/addScanCode', {
									id: item.id
								})
							} else {

								uni.showModal({
									title: '提示',
									content: this.userInfo.level_id != 1 ? '当前加群费用为' + item.price * ((Number(
											this.basicConfiguration.community_level_discount)) / 100).toFixed(
											2) + '(' + this.currency_name + ')' : '当前加群费用为' + item.price +
										'(' + this.currency_name + ')',
									success: async (res) => {
										if (res.confirm) {
											// 加群成功跳转

											const resPoster = await this.$http.post({
												url: this.$api.joinCommunity,
												data: {

													community_id: item.id

												},
												headers: {
													'Authorization': this.userInfo.token
												}

											})

											if (resPoster.code == 0) {
												this.$sun.toast(resPoster.message)
												this.$refs.list.refresh();
												setTimeout(() => {
													this.$sun.navGo('/pagesB/index/addScanCode', {
														id: item.id
													})
												}, 500)




											} else {
												// 没有成功
												if (resPoster.message == '用户余额不足') {
													// this.$refs.myPackagePopup.show({
													// 	style: 'padding:50rpx;',
													// 	bottomClose: false,
													// 	shadeClose: true,
													// 	topclose: true
													// });

													this.$sun.toast(resPoster.message, 'none')

													setTimeout(() => {
														if (this.isAndroid) {
															this.templateTpo()
															this.$sun.navGo(
																'/pagesA/personalCenter/onlineRecharge'
															)
														} else {
															this.$sun.navGo(
																'/pagesA/personalCenter/contactUs'
															)
														}
													}, 1000)
												}

												// this.$sun.toast(resPoster.message, 'none')
											}

										} else if (res.cancel) {

										}
									}
								});

							}
						}
					} else {
						this.$emit('communityPhoneBol', true)

					}
				}












			},
			rechargeFn() {
				this.$refs.myPackagePopup.close()
				setTimeout(() => {
					this.templateTpo()
					this.$sun.navGo('/pagesA/personalCenter/onlineRecharge')

				}, 1000)
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			cancelFn() {
				this.$refs.myPackagePopup.close()
			},
			// 加载数据
			load(paging) {
				setTimeout(async () => {




					const result = await this.$http.post({
						url: this.$api.communityList,
						data: {
							page: paging.page,
							limit: 10,
							name: this.searchVal,
							oneself_uid: this.userInfo.id,



						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {
						this.totalNum = result.data.count;
						if (paging.page == 1) this.list = [];

						this.list = this.list.concat(result.data.list);


					} else {
						this.$sun.toast(result.message, 'none')
					}


					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},
			// 刷新刷剧
			refresh(paging) {

				setTimeout(async () => {




					const result = await this.$http.post({
						url: this.$api.communityList,
						data: {
							page: paging.page,
							limit: 10,
							name: this.searchVal,
							oneself_uid: this.userInfo.id,



						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {
						this.totalNum = result.data.count;
						if (paging.page == 1) this.list = [];

						this.list = this.list.concat(result.data.list);


					} else {
						this.$sun.toast(result.message, 'none')
					}


					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},


			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.communityList,
					data: {
						page: scroll.num,
						limit: 50,
						name: this.searchVal,
						oneself_uid: this.userInfo.id,



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					// this.list.forEach((item) => {
					// 	item.expire_timeObject = this.formatTimeDifference(item.expire_time)
					// 	item.labelList = item.label.split(",")
					// })



					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
		}
	}
</script>

<style lang="less" scoped>
	.phoneBtn {
		margin-top: 40rpx;

		height: 100rpx;
		border-radius: 130rpx;
		color: #fff;
		background: rgb(120, 93, 246);

	}

	.getPhone {
		height: 96rpx;
		border-radius: 124rpx;
		padding-left: 20rpx;
		background: #f5f5f9;
		position: relative;

		.ckPhone {
			height: 96rpx;
			line-height: 100rpx;
			width: 220rpx;
			background-color: transparent;
			color: #000;
		}

		.verificationCode {
			z-index: 999;
			position: absolute;
			right: 0;
			text-align: center;
			width: 170rpx;
			height: 65rpx;
			line-height: 65rpx;
			border-radius: 100rpx;
			font-size: 20rpx;
			background: #7D5CF7;
			color: #fff;
		}
	}

	.gzhCard {
		background-repeat: no-repeat;
		padding: 80rpx;
		// background-color: #fff;
		background-size: contain;
		background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-13/6321c20240613101922884.png');
		height: 708rpx;
		width: 650rpx;

		.qrcode {
			margin: 20rpx 0;
			width: 251.02rpx;
			height: 251.2rpx;
		}
	}

	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));


		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.swiperList {

			margin-top: 20rpx;



			.swiper {
				margin-bottom: 10rpx;

				border-radius: 20rpx;
				width: 100%;
				height: 76rpx;
			


				background: #fff;


			}



		}

		.groupList {
			border-radius: 20rpx;

			margin-top: 20rpx;

			padding: 20rpx;
			background: rgb(255, 255, 255);

			.groupImg {
				width: 158.84rpx;
				height: 156rpx;
			}

			.humanHead {
				width: 22.58rpx;
				height: 22.68rpx;
			}

			.topMounted {
				width: 68rpx;
				height: 36rpx;
				border-radius: 12rpx;
				color: #fff;
				background: rgb(1, 145, 255);
				margin-right: 5rpx;
			}

			.addGroup {
				padding: 10rpx 20rpx;
				height: 48rpx;
				border-radius: 132rpx;
				color: #fff;
				background: linear-gradient(270.00deg, rgb(89, 131, 255), rgb(162, 52, 255) 100%);
			}
		}

		.swiper-item {
			.noticeImg {

				height: 24px;
				width: 24px;
				margin-left: 50rpx;
			}

			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

	}
</style>